<!-- user -->
<template>
  <div class="user content_box">
    <div class="header_row flex align-center flex-wrap" v-if="hasBtn('user:query')">
      <div class="flex align-center m-r-2">
        <span>用户名：</span>
        <el-input v-model="searchObj.LoginUserName" placeholder="请输入内容" clearable></el-input>
      </div>

      <div class="flex align-center m-r-2">
        <span>手机号：</span>
        <el-input v-model="searchObj.Phone" placeholder="请输入内容" clearable></el-input>
      </div>

      <div class="flex align-center m-r-2">
        <span>直属上级：</span>
        <el-input v-model="searchObj.UserParentName" placeholder="请输入内容" clearable></el-input>
      </div>

      <div class="flex align-center m-r-2">
        <span>身份：</span>
        <el-select v-model="searchObj.RoleId" placeholder="请选择" clearable>
          <el-option v-for="item in idOptions" :key="item.Id" :label="item.RoleName" :value="item.Id">
          </el-option>
        </el-select>
      </div>

      <div class="flex align-center m-r-2">
        <span>所属公司：</span>
        <el-select v-model="searchObj.OrgId" placeholder="请选择" clearable>
          <el-option v-for="item in orgList" :key="item.Id" :label="item.OrgName" :value="item.Id">
          </el-option>
        </el-select>
      </div>

      <el-button type="primary" @click="handleFilter">查询</el-button>
    </div>

    <div class="m-b-1 neck_box flex align-center space-between">
      <div>
        <el-button type="success" v-if="hasBtn('user:add')" @click="(currentItem = {}), (showUserInfoForm = true), IsUser()">新增用户</el-button>
        <!-- <el-button type="danger">批量删除</el-button> -->
        <el-button type="warning" disabled v-if="hasBtn('user:export')">导出列表</el-button>
      </div>
      <!--      <el-pagination-->
      <!--        background-->
      <!--        @size-change="handleSizeChange"-->
      <!--        @current-change="handleCurrentChange"-->
      <!--        :current-page="searchObj.currentPage"-->
      <!--        :page-size="10"-->
      <!--        layout="total, prev, pager, next, jumper"-->
      <!--        :total="pageTotal"-->
      <!--      >-->
      <!--      </el-pagination>-->
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize" @pagination="getListfun" />
    </div>
    <el-table class="m-b-1" v-loading="listLoading" :data="list" @sort-change="sortChange" border style="width: 100%" row-key="Id" stripe @expand-change="expand">
      <el-table-column type="expand" fixed>
        <template slot-scope="{ row }">
          <div v-if="row.MallList">
            <div class="userListTitle">商城会员列表</div>
            <el-table :data="row.MallList" border style="width: 100%" :header-cell-class-name="headerClassName">
              <el-table-column prop="index" label="序号" width="80" align="center">
              </el-table-column>
              <el-table-column label="头像" align="center">
                <template slot-scope="scope">
                  <el-popover placement="left" width="150" trigger="hover">
                    <div class="avatarImage">
                      <img style="width: 100px; height: 100px" :src="scope.row.AvatarImage" alt="" />
                    </div>

                    <img slot="reference" style="width: 30px; height: 30px" :src="scope.row.AvatarImage" alt="" />
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="NickName" label="昵称" align="center">
              </el-table-column>
              <el-table-column prop="UserName" label="用户名称" align="center">
              </el-table-column>
              <el-table-column prop="Sex" label="性别" align="center">
                <template slot-scope="scope">
                  <div>
                    {{
                      scope.row.Sex == 1
                        ? "男"
                        : scope.row.Sex == 2
                        ? "女"
                        : "未知"
                    }}
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="Birthday" label="生日"> </el-table-column> -->
              <el-table-column prop="Mobile" label="手机号码" align="center">
              </el-table-column>
              <el-table-column prop="Balance" label="余额" align="center">
              </el-table-column>
              <el-table-column prop="Point" label="积分" align="center">
              </el-table-column>
              <el-table-column prop="FastGold" label="实惠金" align="center">
              </el-table-column>
              <!-- <el-table-column prop="Grade" label="等级" align="center">
              </el-table-column> -->
              <el-table-column prop="CreateTime" label="注册时间" align="center">
              </el-table-column>
            </el-table>
            <el-pagination small class="m-t-1" style="float: right" :current-page.sync="row.currentPage" layout="prev, pager, next" @current-change="rowCurrentChange($event, row)" :total="row.Total">
            </el-pagination>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" align="center" fixed>
      </el-table-column>
      <el-table-column prop="UserName" label="用户名" align="center">
      </el-table-column>
      <el-table-column prop="InCode" label="邀请码" align="center">
        <template slot-scope="scope">
          <div>
            {{ scope.row.InCode || "-" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="UserPhone" label="手机号码" width="120" align="center">
      </el-table-column>
      <!--      <el-table-column-->
      <!--        prop="address"-->
      <!--        label="登录密码"-->
      <!--        width="180"-->
      <!--        align="center"-->
      <!--      >-->
      <!--      </el-table-column>-->
      <el-table-column prop="RoleName" label="用户身份" align="center">
      </el-table-column>
      <el-table-column prop="OrgName" label="所属公司" width="220" align="center">
      </el-table-column>
      <el-table-column prop="UserParentName" label="直属上级" align="center">
      </el-table-column>
      <el-table-column label="支付状态" align="center">
        <template slot-scope="{ row }">
          <div>
            <el-tag type="success" v-if="row.PayState">已支付</el-tag>
            <el-tag type="info" v-else>未支付</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="Withdrawal" label="钱包提现开关" align="center" sortable>
        <template slot-scope="scope">
          <el-switch v-model="scope.row.Withdrawal" @change="valid(scope.row)">
            <!-- :disabled="!hasBtn('commis:active') ? true : !(scope.row.IsSystem == 1)" switch除系统身份不能编辑 -->
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="CreateBy" label="创建人" align="center">
      </el-table-column>
      <el-table-column prop="CreateDate" label="创建时间" width="180" align="center" sortable>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" fixed="right" v-if="hasBtn('user:edit') || hasBtn('user:delete')">
        <template slot-scope="scope">
          <el-button v-if="hasBtn('user:edit')" size="mini" type="primary" @click="(currentItem = $deepClone(scope.row)), (showUserInfoForm = true)">编辑</el-button>

          <el-button size="mini" v-if="hasBtn('user:delete')" type="danger" @click="$delConfirm(() => del(scope.row.Id))">删除</el-button>
          <!-- <el-button
            size="mini"
            type="success"
            @click="handlePowerEdit(scope.$index, scope.row)"
            >策略配置</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-dialog
      :title="dialogTitle"
      class="dialog"
      :visible.sync="dialogVisible"
      width="800px"
      v-if="dialogVisible"
    >
      <template>
        <power-edit :RoleId="RoleId" :IdentityId="IdentityId"></power-edit>
      </template>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog> -->
    <UserInfoForm :show.sync="showUserInfoForm" :isuser=true :form-data="currentItem" @finish="getListfun"></UserInfoForm>
  </div>
</template>

<script>
  import { getUser, delUser, toggleValidUser, GetCoreMallList, WithdrawalSwitch, GetById } from '@/api/system/user'
  import { getUserRole } from '@/api/system/user-role'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import userInfo from './components/userInfo.vue'
  import powerEdit from './components/powerEdit.vue'
  import UserInfoForm from './components/UserInfoForm'
  import { deepClone } from '@/utils'
  import { getList } from '@/api/organization'
  export default {
    // import引入的组件需要注入到对象中才能使用
    name: 'user',
    components: { Pagination, userInfo, powerEdit, UserInfoForm },
    data() {
      // 这里存放数据
      return {
        RoleId: "",
        IdentityId: '',
        showUserInfoForm: false,
        currentItem: {},
        dialogType: "add",
        dialogVisible: false,

        idOptions: [],
        orgList: [],
        list: [],
        total: 0,
        listLoading: true,
        searchObjTmpl: {},
        searchObj: {
          LoginUserName: '',
          RoleId: '',
          OrgId: '',
          Phone: '',
          UserParentName: ''
        },
        listQuery: {
          PageIndex: 1,
          PageSize: 10,
          IsPaging: true, //是否分页
          SortName: 'CreateDate',
          SortType: false,
          // IsSystemUser: false
        },
      }
    },
    // 监听属性 类似于data概念
    computed: {
      dialogTitle() {
        return this.dialogType == 'add' ? '新增用户' : this.dialogType == 'edit' ? '编辑用户信息' : '用户策略配置'
      },
      calcDialogType() {
        return (this.dialogType == 'add' || this.dialogType == 'edit')
      }
    },
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.searchObjTmpl = deepClone(this.searchObj)
      this.getListfun()
      this.getUserRoleFun()
      this.getOrgList()
    },
    activated() { },
    // 方法集合
    methods: {
      ByIdFun(id) {
        const obj = { "Id": id }
        GetById(obj).then(res => this.currentItem = res.Data).catch()
      },
      headerClassName({ row, rowIndex }) {
        return 'box-header-bg'
      },
      IsUser() {
        console.log(this.$store)
      },
      expand(row, expand) {
        if (!row.OpenExpand) {
          row.OpenExpand = true
          this.getDetail(row) //获取云商城用户资料
        }
      },
      rowCurrentChange(e, row) {
        this.getDetail(row)
      },
      async getDetail(row) {
        if (!row.currentPage) {
          row.currentPage = 1
        }
        const { Data, Total } = await GetCoreMallList({
          Id: row.Id,
          PageIndex: row.currentPage,
          IsPaging: true

        })
        console.log(Data)
        row.Total = Total
        // row.Mains = data.Mains
        let Dnata = Data.map((item, index) => {
          for (let cell in item) {
            if (!item[cell] && this.$getType(item[cell]) !== 'Number') {
              item[cell] = '-'
            }
          }
          return { ...item, index: (index + 1) + ((row.currentPage - 1) * 10) }
        })
        this.$set(row, 'MallList', Dnata)
      },
      async getOrgList() {
        const { Data } = await getList({ IsPaging: false })
        this.orgList = Data || []
      },
      getUserRoleFun() {
        let obj = {
          "IsPaging": false, //是否分页
          "FilterRole": true, //是否过滤系统角色
        }
        getUserRole(obj).then(res => {
          this.idOptions = res.Data
          console.log(res.Data)
        })
      },
      showUserInfo(type, obj) {
        this.dialogType = type
        this.dialogVisible = true
        switch (type) {
          case 'add':

            break
          case 'edit':

            break
          case 'powerEdit':
            this.RoleId = obj.row.Id
            this.IdentityId = obj.row.RoleId
            break
        }
      },
      handleEdit(index, row) {
        let obj = { index, row }
        this.showUserInfo('edit', obj)
      },
      //策略配置 编辑
      handlePowerEdit(index, row) {
        let obj = { index, row }
        this.showUserInfo('powerEdit', obj)
      },
      resetFilter() {
        this.searchObj = deepClone(this.searchObjTmpl)
        this.handleFilter()
      },
      sortChange(data) {
        const { prop, order } = data
        this.listQuery.SortName = prop
        if (order === 'ascending') {
          this.listQuery.SortType = true
        } else {
          this.listQuery.SortType = false
        }
        this.handleFilter()
      },
      handleFilter() {
        this.listQuery.PageIndex = 1
        this.getListfun()
      },
      getQuery() {
        const params = {
          ...this.searchObj,
          ...this.listQuery,
        }
        return params
      },
      async getListfun() {
        this.listLoading = true
        const params = this.getQuery()
        // 00000000-0000-0000-0000-000000000000
        if (!params.RoleId) {
          params.RoleId = '00000000-0000-0000-0000-000000000000'
        }
        if (!params.OrgId) {
          params.OrgId = '00000000-0000-0000-0000-000000000000'
        }

        const { Data, Total } = await getUser(params)
        this.listLoading = false
        if (!Data) {
          this.list = []
          this.total = 0
          return
        }
        this.list = Data.filter(item => item.RoleId != '35a6af7f-a555-46a1-9a26-be7c87b0f1c5')
        this.total = Total || 0
        console.log('管家用户')
        console.log(this.list)
      },
      async del(id) {
        const { code } = await delUser({
          Id: id
        })
        if (code == 200) {
          this.$notify({
            title: '删除成功',
            message: 'success',
            type: 'success',
            duration: 2000
          })
          this.getListfun()
        }
      },
      async valid(row) {
        const { code } = await WithdrawalSwitch({
          Id: row.Id,
          Withdrawal: row.Withdrawal
        })
        if (code == 200) {
          this.$notify({
            title: '切换成功',
            message: 'success',
            type: 'success',
            duration: 2000
          })
          this.getListfun()
        }
      },

    } // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
//@import url(); 引入公共css类
<style  scoped>
  .avatarImage {
    width: 100%;
    text-align: center;
  }
</style>
